{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <div class="fui-page fui-page-current page-goods-list">
        <style>
            .page-goods-list .fui-content{top:2.2rem;}
            .fui-navbar ~ .fui-content, .fui-content.navbar{padding-bottom:0;}
        </style>
        <style type="text/css">
            .option-picker{
                padding-bottom:2.25rem
            }
            .picker-bulk .header {
                height: 4.5rem;
                padding: 0 0.6rem 0.3rem 0.6rem;
            }
            .picker-bulk .header .thumb {
                height: 5rem;
                width: 5rem;
                background: #eee;
                border-radius: 0.2rem;
                position: absolute;
                top: -0.8rem;
                left: 0.7rem;
            }
            .picker-bulk .header .thumb img {
                height: 5rem;
                width: 5rem;
                border-radius: 0.2rem;
            }
            .picker-bulk .header .inner {
                height: inherit;
                padding: 0.8rem 1.7rem 0 5.5rem;
            }
            .picker-bulk .header .inner .title {
                height: 1.8rem;
                font-size: 0.75rem;
                line-height: 0.9rem;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .picker-bulk .header .inner .price {
                height: 1.5rem;
                line-height: 2rem;
                font-size: 0.9rem;
                color: #ff5555;
            }
            .picker-bulk .header .inner .price small {
                font-size: 0.5rem;
            }
            .picker-bulk .header .icon-guanbi1 {
                color: #5d5d5d;
                font-size: 1.4rem;
                position: absolute;
                top: 0.1rem;
                right: 0.5rem;
            }
            .picker-bulk .header .icon-guanbi1:before {
                font-weight: 100;
            }
            .picker-bulk .specs {
                height: 2.35rem;
                padding: 0 0.3rem;
                font-size: 0.75rem;
                color: #333;
                border-top: 1px solid #f5f5f5;
                border-bottom: 1px solid #f2f2f2;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
            }
            .picker-bulk .specs .go-left,
            .picker-bulk .specs .go-right {
                height: 2.35rem;
                line-height: 2.35rem;
                color: #9e9e9e;
            }
            .picker-bulk .specs .inner {
                padding: 0.6rem 0;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            .picker-bulk .specs .inner .item {
                width: 33.33%;
                text-align: center;
                float: left;
                position: relative;
            }
            .picker-bulk .specs .inner .item:before {
                content: "";
                border-left: 2px solid #f3f3f3;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
            }
            .picker-bulk .specs .inner .item:first-child:before {
                border: 0;
            }
            .picker-bulk .specs .inner .item.active:after {
                content: "";
                position: absolute;
                border-bottom: 2px solid #ff5555;
                width: 2rem;
                left: 50%;
                margin-left: -1rem;
                bottom: -0.55rem;
            }
            .picker-bulk .specs .inner .item .dot {
                position: absolute;
                right: 0.25rem;
                top: -0.25rem;
                font-size: 0.5rem;
                color: #fff;
                background: #ff4444;
                height: 0.8rem;
                line-height: 0.8rem;
                border-radius: 0.8rem;
                padding: 0 0.15rem;
            }
            .picker-bulk .body {
                max-height: 11.8rem;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .picker-bulk .body .item {
                height: 3.3rem;
                padding: 0 0.6rem;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
            }
            .picker-bulk .body .item:before {
                content: "";
                position: absolute;
                border-top: 1px solid #e3e3e3;
                top: 0;
                left: 0.6rem;
                right: 0.6rem;
                -webkit-transform-origin: 0 0;
                -ms-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scaleY(0.5);
                -ms-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
            .picker-bulk .body .item:first-child:before {
                border: 0;
            }
            .picker-bulk .body .item .left {
                width: 1%;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                line-height: 1rem;
                font-size: 0.75rem;
            }
            .picker-bulk .body .item .left .title {
                height: 1rem;
                padding-right: 0.2rem;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .picker-bulk .body .item .left .price {
                color: #999;
                font-size: 0.65rem;
                line-height: 0.65rem;
                padding-bottom: 0.2rem;
            }
            .picker-bulk .body .item .right {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
            }
            .picker-bulk .body .item .right .total {
                color: #666;
                font-size: 0.55rem;
                padding-right: 0.4rem;
            }
            .picker-bulk .counts {
                height: 2.2rem;
                padding: 0.2rem 0.6rem;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                position: relative;
            }
            .picker-bulk .counts:before {
                content: "";
                border-top: 1px solid #e6e6e6;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                -webkit-transform-origin: 0 0;
                -ms-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scaleY(0.5);
                -ms-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
            .picker-bulk .counts .tip {
                padding: 0.1rem 0.35rem;
                border: 1px solid #ff5555;
                color: #ff5555;
                font-size: 0.55rem;
                border-radius: 1rem;
            }
            .picker-bulk .counts .tip.size1 {
                font-size: 0.5rem;
            }
            .picker-bulk .counts .tip.size2 {
                font-size: 0.45rem;
            }
            .picker-bulk .counts .inner {
                text-align: right;
                font-size: 0.65rem;
                line-height: 0.9rem;
                color: #737373;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                vertical-align: bottom;
            }
            .picker-bulk .counts .inner .countprice {
                color: #ff5555;
                font-size: 0.8rem;
                vertical-align: bottom;
            }
            .picker-bulk .counts .inner .countprice span {
                font-size: 0.5rem;
            }
            .option-picker .fui-navbar .btn {
                font-size: 0.85rem;
            }
            .fui-number {
                height: 1.6rem;
                width: 5.95rem;
            }
            .fui-number .minus,
            .fui-number .plus {
                width: 1.6rem;
                font-weight: 300;
                font-size: 1.2rem;
                line-height: 1.3rem;
            }
        </style>
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back"></a>
            </div>
            <div class="title">
                <form method="post">
                    <div class="searchbar">
                        <div class="search-input">
                            <i class="icon icon-search"></i>
                            <input type="search" id="search" placeholder="输入关键字..." value="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="fui-header-right" data-nomenu="true">
                <a href="javascript:;"><i class="icon icon-sort" id="listblock" data-state="list"></i></a>
            </div>
        </div>
        <!--
        <div class="sort">
            <div class="item on"><span class="text">综合</span></div>
            <div class="item" data-order="sales"><span class="text">销量</span></div>
            <div class="item item-price" data-order="minprice"><span class="text">价格</span>
                <span class="sorting">
		<i class="icon icon-sanjiao2"></i>
		<i class="icon icon-sanjiao1"></i>
		
	    </span>
            </div>
            <div class="item" data-order="filter"><span class="text">筛选 <i class="icon icon-filter "></i></span> </div>
        </div>
        -->
        <div class="fui-content navbar">
            <div class="fui-content-inner">
                <div class="content-empty" style="display:none;">
                    <i class="icon icon-searchlist"></i><br>暂时没有任何商品
                </div>
                <div class="fui-goods-group container block" id="goods-list-container">
                </div>
                <div class="infinite-loading"><span class="fui-preloader"></span><span class="text"> 正在加载...</span></div>
            </div>
        </div>
        <div class="fui-mask-m"></div>
        <script type="text/html" id="tpl_goods_list">
            {{#  layui.each(d.list, function(index, item){ }}
            <div class="fui-goods-item" data-goodsid="{{ item.id }}" data-type="{{ item.type }}">
                <a href="javascript:goGoodsDetail({{ item.id }});">
                    <div class="image" data-lazy-background="{{ item.thumb }}">
                        {{#  if(item.total<=0){ }}
                        <div class="salez" style="background-image: url('__STATIC__/m/imgs/shouqin.png'); "></div>
                        {{#  } }}
                    </div>
                </a>
                <div class="detail">
                    <a href="javascript:goGoodsDetail({{ item.id }});">
                        <div class="name">
                            {{ item.goods_name }}
                        </div>
                    </a>
                    <div class="price" style="margin-top: 0.3rem">
                        <span class="text">￥{{ item.minprice }}</span>
                        <span class="buy" data-type="{{ item.type }}">购买</span>
                    </div>
                </div>
            </div>
            {{#  }); }}
        </script>
        <script>
            var pageIndex = 1;
            var pageMore = true;
            function getGoodsList() {
                // 没有更多页，则返回
                if(!pageMore){
                    return;
                }
                core.json("{:url('')}",{p:pageIndex,keyword:$('#search').val()},function (json) {
                    if(json.code){
                        var view = document.getElementById('goods-list-container');
                        pageMore = json.data.has_more;

                        $('.content-empty').hide(0);
                        var getTpl = $('#tpl_goods_list').text();
                        layui.laytpl(getTpl).render(json.data, function(html){
                            if(pageIndex > 1){
                                $(view).append(html)
                            }
                            else{
                                $(view).html(html)
                            }
                            setTimeout(function () {
                                $('.fui-content').lazyload();
                            })
                        });

                        if(json.data.list.length < 1 && pageIndex < 2){
                            $('.content-empty').show(0);
                        }

                        pageIndex++;

                        if(!pageMore){
                            $('.fui-content').infinite('stop');
                            hideLoading();
                        }
                        else {
                            $('.fui-content').infinite('init');
                        }
                    }
                },false,false);
            }

            function hideLoading() {
                $('.infinite-loading').hide(0);
            }
            function goGoodsDetail(_id) {
                var baseGoodsDetailUrl = "{:url('m/Goods/detail')}";
                $.router.load(baseGoodsDetailUrl + '?id=' + _id);
            }
            $(function () {
                getGoodsList();

                $('.fui-content').infinite({
                    onLoading: function() {
                        getGoodsList();
                        console.log('onLoading')
                    }
                });
                $('#search').bind('input propertychange', function() {
                    if ($.trim($(this).val()) == '') {
                        $('.container').empty();
                        pageMore = true;
                        pageIndex = 1;
                        console.log('input propertychange')
                        getGoodsList();
                    }
                });
                $('form').submit(function() {
                    $('.container').empty();
                    pageMore = true;
                    pageIndex = 1;
                    console.log('form')
                    getGoodsList();
                    return false
                });
            })
        </script>
        {include file="common/footer_bar_nav" /}
    </div>
</div>
{/block}
